<script setup lang="ts">
import { onMounted, ref } from "vue";


// 大腿dom元素
const footerLeft = ref<HTMLElement>()
const footerLeftWidth = ref<number>(0)
onMounted((): void => {
  footerLeftWidth.value = footerLeft.value?.clientWidth || 0

})



</script>

<template>
  <div class="person">
    <div class="body" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }">
      <div class="head"></div>



      <div class="hand_right" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }">
        <div class="forearm_right" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }"></div>
      </div>
      <div class="hand_left" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }">
        <div class="forearm_left" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }"></div>
      </div>

      <div class="footer_right" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }">
        <div class="shank_right" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }"></div>
      </div>
      <div ref="footerLeft" class="footer_left" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }">
        <div class="shank_left" :style="{ borderRadius: footerLeftWidth / 2 + 'px' }"></div>
      </div>
    </div>


  </div>
</template>

<style lang='scss' scoped>
@keyframes wipeTearBig {
  25% {
    transform: rotate(-145deg);
  }

  75% {
    transform: rotate(-155deg);
  }

  100% {
    transform: rotate(-150deg);
  }
}

@keyframes wipeTearSmall {
  25% {
    transform: rotate(-113deg);
  }

  75% {
    transform: rotate(-107deg);
  }

  100% {
    transform: rotate(-110deg);
  }
}

@keyframes cry {

  30%,
  50% {
    transform: translate(0, 0) rotate(0);
  }

  40% {
    transform: translate(0, -4%) rotate(5deg);
  }
}

@keyframes backBig {

  50% {
    transform: rotate(120deg);
  }

  100% {
    transform: rotate(150deg);
  }
}

@keyframes backSmall {

  50% {
    transform: rotate(-60deg);
  }

  100% {
    transform: rotate(-125deg);
  }
}

.person {
  position: relative;
  top: 150%;

  width: 100%;
  height: 0;
  padding-bottom: 300%;

  .body {
    position: absolute;
    bottom: 5%;
    left: 15%;

    width: 70%;
    height: 0;
    padding-bottom: 100%;

    background: url('../images/少洪身体.png') no-repeat;
    background-size: 110% 130%;
    background-position: 81% 56%;

    .head {
      position: absolute;
      top: -73%;
      left: -8%;

      width: 120%;
      height: 0;
      padding-bottom: 120%;
      background: url('../images/少洪呐喊.png') no-repeat;
      background-size: contain;
      background-position: center center;

      transform-origin: left center;
      animation: cry 2s linear infinite;
    }

    .hand_right {
      position: absolute;
      top: 7%;
      left: 0%;

      width: 21.5%;
      height: 0;
      padding-bottom: 86%;
      background-color: #fff;
      border: 1px solid #000;

      transform: rotate(40deg);
      transform-origin: center top;

      z-index: 10;

      .forearm_right {
        position: absolute;
        left: 0;
        top: 82%;

        width: 100%;
        height: 100%;
        // padding-bottom: 50%;

        background-color: #fff;
        border: 1px solid #000;

        transform: rotate(-120deg);
        transform-origin: center 10%;
      }
    }

    .hand_left {
      position: absolute;
      top: 11%;
      right: 0%;

      width: 21.5%;
      height: 0;
      padding-bottom: 58%;
      background-color: #fff;
      border: 1px solid #000;

      transform: rotate(-150deg);
      transform-origin: center top;

      animation: wipeTearBig 1s linear infinite;

      .forearm_left {
        position: absolute;
        left: 0;
        top: 82%;

        width: 100%;
        height: 161%;
        // padding-bottom: 50%;

        background-color: #fff;
        border: 1px solid #000;

        transform: rotate(-110deg);
        transform-origin: center 10%;
        animation: wipeTearSmall 1s linear infinite;
      }
    }

    .footer_right {
      position: absolute;
      top: 100%;
      left: 15%;

      width: 21.5%;
      height: 0;
      padding-bottom: 107%;
      background-color: #fff;
      border: 1px solid #000;

      transform: rotate(150deg);
      transform-origin: center top;
      animation: backBig .6s linear infinite;

      .shank_right {
        position: absolute;
        left: 0;
        top: 82%;

        width: 100%;
        height: 110%;

        background-color: #fff;
        border: 1px solid #000;

        transform: rotate(-125deg);
        transform-origin: center 10%;
        animation: backSmall .6s linear infinite;
      }
    }

    .footer_left {
      position: absolute;
      top: 100%;
      right: 15%;

      width: 21.5%;
      height: 0;
      padding-bottom: 107%;
      background-color: #fff;
      border: 1px solid #000;

      transform: rotate(150deg);
      transform-origin: center top;
      animation: backBig .6s linear infinite .3s;

      .shank_left {
        position: absolute;
        left: 0;
        top: 82%;

        width: 100%;
        height: 110%;

        background-color: #fff;
        border: 1px solid #000;

        transform: rotate(-125deg);
        transform-origin: center 10%;
        animation: backSmall .6s linear infinite .3s;
      }

    }
  }
}
</style>